<template>
  <div>
    <CloudRadioGroup :list="list" v-model="type"></CloudRadioGroup>
    <CloudTable
      class="test-table"
      :columns="columns"
      :dataSource="dataSource"
      :rowSelection="rowSelection"
    ></CloudTable>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    title: '2.选择框',
    subTitle: '第一列是联动的选择框。默认点击 checkbox 触发选择行为',
    data () {
      return {
        type: 'checkbox',
        list: [{
          title: '复选',
          value: 'checkbox'
        }, {
          title: '单选',
          value: 'radio'
        }],
        columns: [
          {
            title: 'name',
            dataIndex: 'name',
          },
          {
            title: 'Age',
            dataIndex: 'age',
          },
          {
            title: 'Sex',
            dataIndex: 'sex',
          },
        ],
        dataSource: [
          {
            key: '1',
            name: 'John Brown',
            age: 32,
            sex: '男'
          },
          {
            key: '2',
            name: 'Jim Green',
            age: 42,
            sex: '女'
          },
          {
            key: '3',
            name: 'Joe Black',
            age: 32,
            sex: '男'
          },
        ]
      }
    },
    computed: {
      rowSelection () {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
          onSelect: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows);
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log(selected, selectedRows, changeRows);
          },
          type: this.type
        }
      },
    },
    methods: {
    }
  }
</script>
<style lang="scss" scoped>
  .picker-item {
    padding-bottom: 10px;
  }
</style>